<script setup>

import {Search, Plus, Delete, Edit} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {post} from "@/net/index.js";
import {ElMessage, ElMessageBox} from "element-plus";

const searchModel = reactive({
  username: '',
  email: ''
})
const account = reactive({
  id: '',
  username: '',
  password: '',
  email: '',
  role: '',
  registerTime: ''
})

const editForm = reactive({
  id: '',
  username: '',
  email: '',
  role: ''
})
const formLabelWidth = ref('130px')
const dialogFormVisible = ref(false)
const title = ref('')
function openEditUI(row){
  if(row === null){
    title.value = '新增用户'
  }else{
    title.value = '编辑用户'
    editForm.id = row.id
    editForm.username = row.username
    editForm.email = row.email
    editForm.role = row.role
  }
  dialogFormVisible.value = true
}
function addAccount(){
  post('/api/auth/account/add',{...editForm}, ()=>{
    getAccountList()
    ElMessage({
      type: 'success',
      message: '添加用户成功'
    })
    clearFrom()
  })
}
function saveAccount() {
  if(title.value === '新增用户'){
    addAccount()
    dialogFormVisible.value = false
  }else{
    updateAccount()
    dialogFormVisible.value = false
  }
}
function updateAccount(){
  post('/api/auth/account/update',{...editForm}, ()=>{
    getAccountList()
    ElMessage({
      type: 'success',
      message: '修改用户成功'
    })
    clearFrom()
  })
}
function clearFrom(){
  editForm.id = ''
  editForm.username = ''
  editForm.email = ''
  editForm.role = ''
}

const accountList = ref([])
function getAccountList(searchModel){
  post(`/api/auth/account/list`, {
    ...searchModel
  },(data) => {
    accountList.value = data.accountList
  })
}
function getAccountListByUsernameOrEmail(){
  console.log(searchModel)
  post(`/api/auth/account/list`, {...searchModel},(data) => {
    accountList.value = data.accountList
  })
}
function deleteAccount(row){
  ElMessageBox.confirm(
      '您确定删除' + row.username + '?' ,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  )
      .then(() => {
    account.id = row.id;
    console.log(row)
    post('/api/auth/account/delete',{...account}, ()=>{
      getAccountList()
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      account.id = ''
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除'
    })
  })
}
onMounted(() => {
  getAccountList()
})

</script>

<template>
  <div style="margin-top: 50px; margin-left: 200px; padding: 10px">
    <el-card  id="search">
      <el-row >
        <el-col :span="20">
          <el-input v-model="searchModel.username"  placeholder="用户名" />
          <el-input v-model="searchModel.email"  placeholder="电子邮件" />
          <el-button type="primary" round @click="getAccountListByUsernameOrEmail" ><el-icon><Search /></el-icon>查询</el-button>
        </el-col>
        <el-col :span="4" align="right">
          <el-button type="primary" circle @click="openEditUI(null)"><el-icon><Plus /></el-icon></el-button>
        </el-col>
      </el-row>
    </el-card>
<!--    结果列表-->
    <el-card>
      <el-table :data="accountList" stripe style="width: 100%">
        <el-table-column type="index" label="#" width="80" />
        <el-table-column prop="id" label="用户ID" width="180" />
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="email" label="电子邮件" width="280" />
        <el-table-column prop="role" label="角色" width="180" />
        <el-table-column prop="registerTime" label="注册时间" />
        <el-table-column align="center" label="操作" width="180">
          <template #default="scope">
            <el-button type="primary" @click="openEditUI(scope.row)" :icon="Edit" circle />
            <el-button type="danger" @click="deleteAccount(scope.row)" :icon="Delete" circle />
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 用户信息编辑对话框 -->
    <el-dialog :title="title"  v-model="dialogFormVisible">
      <el-form :model="editForm" >
        <el-form-item label="用户名" :label-width="formLabelWidth" >
          <el-input style="width: 80%;"  v-model="editForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" >
          <el-input  v-model="editForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <div style="margin-top: 20px">
          <el-form-item label="角色" :label-width="formLabelWidth">
            <el-radio-group v-model="editForm.role" size="default" >
              <el-radio label="user" border>用户</el-radio>
              <el-radio label="admin" border>管理</el-radio>
              <el-radio label="test" border>测试</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button @click="saveAccount" type="primary">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
#search .el-input {
  width: 200px;
  margin-right: 10px;;
}
.el-dialog .el-input{
  width: 80%;
}
</style>